<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Tea collections</title>
  <link rel="stylesheet" href="styles/bootstrap.min.css">
  <link rel="stylesheet" href="styles/slick.css">
  <link rel="stylesheet" href="styles/slick-theme.css">
  <link rel="stylesheet" href="styles/jquery-ui.css">
  <link rel="stylesheet" href="styles/hover-min.css">
  <link rel="stylesheet" href="styles/animate.compat.css">
  <link rel="stylesheet" href="styles/magnific-popup.css">
  <link rel="stylesheet" href="styles/style.css">
</head>
<body>

<header class="bg-body-tertiary container-fluid mb-5 wow fadeInBottomRight">
  <nav class="navbar navbar-expand-lg bg-body-tertiary justify-content-center justify-content-sm-center">
    <div class="container-fluid justify-content-between justify-content-sm-between mb-2 mb-sm-2 mb-lg-0">
      <a class="navbar-brand" href="#">
        <img src="assets/images/Logo.svg" alt="Logo">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-between" id="navbarNavDropdown">
        <ul class="navbar-nav text-center">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Главная</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Преимущества</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Цены</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Контакты</a>
          </li>
        </ul>
        <form class="flex-column flex-sm-row d-flex" role="search">
          <input class="form-control mb-2 mb-sm-0 me-2" type="search" placeholder="Поиск чая" aria-label="Search">
          <button class="btn btn-outline-primary hvr-bounce-to-bottom px-4" type="button">Найти</button>
        </form>
      </div>
    </div>
  </nav>
</header>

<main class="container">
  <section class="container-fluid carousel-slick mb-5 wow fadeInTopLeft">
      <div class="slide-one d-flex align-items-center">
        <article class="row h-50 flex-column align-items-center ms-2 ms-sm-2 ms-lg-5 ps-sm-2 ps-lg-5 pt-md-5">
          <h2 class="col fs-1 fw-bold">Скидки на травянные чаи</h2>
          <p class="col pt-2 mb-0 mt-2">Узнай все подробности, заполнив заявку</p>
          <fieldset class="col">
            <button id="button-scroll" type="button" class="btn btn-primary hvr-shutter-in-vertical px-5 scroll-form">Заполнить</button>
          </fieldset>
        </article>
      </div>
      <div class="slide-two d-flex align-items-center">
        <article class="col col-md-6 h-50 flex-column align-items-center ms-2 ms-sm-2 ms-lg-5 ps-sm-2 ps-lg-5 pt-md-5 pe-4">
          <h2 class="col fs-1 fw-bold pb-5 mb-4">Закажи три пачки чая и получи подарок</h2>
          <fieldset class="col">
            <button type="button" class="btn btn-primary hvr-shutter-in-vertical px-5 scroll-form">Заполнить</button>
          </fieldset>
        </article>
      </div>
    <div class="slide-three d-flex align-items-center">
      <article class="col col-md-6 h-50 flex-column align-items-center ms-2 ms-sm-2 ms-lg-5 ps-sm-2 ps-lg-5 pt-md-5 pe-4">
        <h2 class="col fs-1 fw-bold pb-5 mb-4">Попробуй нашу новинку — ягодный чай</h2>
        <fieldset class="col">
          <button type="button" class="btn btn-primary hvr-shutter-in-vertical px-5 scroll-form">Заполнить</button>
        </fieldset>
      </article>
    </div>
  </section>

  <section class="container-fluid mb-5 wow fadeInTopRight">
    <h2 class="text-center fw-bold mb-5">Наши чайные коллекции</h2>
    <article class="container-fluid gap-4 d-flex flex-wrap justify-content-center">
      <figure class="card mb-0" style="width: 25rem;">
        <a href="assets/images/image-card-1.png" class="image-popup-vertical-fit">
          <img src="assets/images/image-card-1.png" class="card-img-top" alt="image-card-1">
        </a>
        <figcaption class="card-body">
          <p class="card-title h5">Детокс чай лайм</p>
          <p class="card-text">Великолепный чай внесет в вашу жизнь яркие краски и вкус расслабления</p>
          <a href="#" class="btn btn-primary hvr-push  px-5">Подробнее</a>
        </figcaption>
      </figure>
      <figure class="card mb-0" style="width: 25rem;">
        <a href="assets/images/image-card-2.png" class="image-popup-vertical-fit">
          <img src="assets/images/image-card-2.png" class="card-img-top" alt="image-card-1">
        </a>
        <figcaption class="card-body">
          <p class="card-title h5">Ягодный чай</p>
          <p class="card-text">Нотки ягод позволят вам расслабиться и насладиться великолепием этого чая</p>
          <a href="#" class="btn btn-primary hvr-push  px-5">Подробнее</a>
        </figcaption>
      </figure>
      <figure class="card mb-0" style="width: 25rem;">
        <a href="assets/images/image-card-3.png" class="image-popup-vertical-fit">
          <img src="assets/images/image-card-3.png" class="card-img-top" alt="image-card-1">
        </a>
        <figcaption class="card-body">
          <p class="card-title h5">Цветочный чай</p>
          <p class="card-text">Душистые цветы создают невероятный аромат и наполняют вас энергией</p>
          <a href="#" class="btn btn-primary hvr-push  px-5">Подробнее</a>
        </figcaption>
      </figure>
      <figure class="card mb-0" style="width: 25rem;">
        <a href="assets/images/image-card-4.png" class="image-popup-vertical-fit">
          <img src="assets/images/image-card-4.png" class="card-img-top" alt="image-card-1">
        </a>
        <figcaption class="card-body">
          <p class="card-title h5">Очищающий чай</p>
          <p class="card-text">Бесподобный чай для получения утреннего заряда бодрости</p>
          <a href="#" class="btn btn-primary hvr-push  px-5">Подробнее</a>
        </figcaption>
      </figure>
      <figure class="card mb-0" style="width: 25rem;">
        <a href="assets/images/image-card-5.png" class="image-popup-vertical-fit">
          <img src="assets/images/image-card-5.png" class="card-img-top" alt="image-card-1">
        </a>
        <figcaption class="card-body">
          <p class="card-title h5">Кислый чай</p>
          <p class="card-text">Кислый чай для настоящих ценителей кислинки во время чаепития</p>
          <a href="#" class="btn btn-primary hvr-push  px-5">Подробнее</a>
        </figcaption>
      </figure>
      <figure class="card mb-0" style="width: 25rem;">
        <a href="assets/images/image-card-6.png" class="image-popup-vertical-fit">
          <img src="assets/images/image-card-6.png" class="card-img-top" alt="image-card-1">
        </a>
        <figcaption class="card-body">
          <p class="card-title h5">Лимонная мята</p>
          <p class="card-text">Смесь лимона с мятой сделает ваш день самым лучшим</p>
          <a href="#" class="btn btn-primary hvr-push px-5">Подробнее</a>
        </figcaption>
      </figure>
    </article>
  </section>

  <section id="form-wrapper" class="row justify-content-center mb-5 wow fadeInBottomLeft">
    <article class="col-12">
      <h2 class="text-center fw-bold mb-5">Ответы на часто задаваемые вопросы</h2>
    </article>
    <article class="col-12 col-md-10 col-lg-8">
      <div id="accordion" class="row">
        <h3 class="pt-3 pb-3 bg-primary text-white rounded-3 fw-bold arrow">Собираете ли вы подарочные боксы?</h3>
        <div class="border-0">
          <p class="mb-0">
            Да, у нас есть такая услуга. Мы можем собрать подарочный бокс на любой вкус, объем и стоимость!
          </p>
        </div>
        <h3 class="pt-3 pb-3 bg-primary text-white rounded-3 fw-bold arrow">Сколько у вас разновидностей чая?</h3>
        <div class="border-0">
          <p class="mb-0">
            Все разновидности чая представлены на нашей странице.
          </p>
        </div>
        <h3 class="pt-3 pb-3 bg-primary text-white rounded-3 fw-bold arrow">В какой срок осуществляется доставка?</h3>
        <div class="border-0">
          <p class="mb-0">
            Доставка осуществляется в течение часа в пределах нашего города. Сроки доставки по области или по россии зависят от транспортных компаний но не более 15 дней.
          </p>
        </div>
        <h3 class="pt-3 pb-3 bg-primary text-white rounded-3 fw-bold arrow">У вас обновляется ассортимент?</h3>
        <div class="border-0">
          <p class="mb-0">
            Да, обновление ассортимента чая происходит в конце каждой недели.
          </p>
        </div>
        <h3 class="pt-3 pb-3 bg-primary text-white rounded-3 fw-bold arrow">Какого объема у вас пачки чая?</h3>
        <div class="border-0">
          <p class="mb-0">
            Стандартные объёмы - 50гр и 100гр. Но вы можете заказать необходимый Вам объём самомстоятельно!
          </p>
        </div>
      </div>
    </article>
  </section>

  <section id="order" class="row justify-content-center mb-5 wow fadeInBottomRight text-append ">
    <article class="col-12 hide">
      <h2 class="text-center fw-bold mb-5">Сделать заказ</h2>
    </article>
    <article class="col-12 col-sm-12 col-lg-6 hide">
      <form action="" id="form" class="row g-3 mb-5">
        <fieldset class="col-md-4">
          <label for="inputName" class="form-label">Имя</label>
          <input type="text" name="name" class="form-control" id="inputName">
        </fieldset>
        <fieldset class="col-md-4">
          <label for="inputLastName" class="form-label">Фамилия</label>
          <input type="text" name="lastName" class="form-control" id="inputLastName">
        </fieldset>
        <fieldset class="col-md-4">
          <label for="inputPhone" class="form-label">Телефон</label>
          <input type="tel" name="phone" class="form-control" id="inputPhone">
        </fieldset>
        <fieldset class="col-md-6">
          <label for="inputState" class="form-label">Страна</label>
          <input type="text" name="state" class="form-control" id="inputState">
        </fieldset>
        <fieldset class="col-md-6">
          <label for="inputIndex" class="form-label">Индекс</label>
          <input type="number" name="index" class="form-control" id="inputIndex" maxlength="6">
        </fieldset>
        <fieldset class="col-md-12">
          <label for="inputAddress" class="form-label">Адрес</label>
          <input type="text" name="address" class="form-control" id="inputAddress">
        </fieldset>
        <fieldset class="col-md-12">
          <button type="submit" class="btn btn-primary hvr-radial-out px-5">Отправить</button>
        </fieldset>
      </form>
    </article>
  </section>
</main>

<footer class="row bg-body-tertiary px-3 py-3 d-flex align-items-center">
  <p class="col-12 mb-0">Все права защищены</p>
</footer>

<script src="scripts/jquery-3.7.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/slick.min.js"></script>
<script src="scripts/jquery-ui.min.js"></script>
<script src="scripts/wow.min.js"></script>
<script src="scripts/jquery.inputmask.min.js"></script>
<script src="scripts/jquery.validate.min.js"></script>
<script src="scripts/jquery.magnific-popup.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>